
<template>
  <div class="container">
    <el-card>
      <el-row>
        <el-col :span="18">
          <el-form ref="formRef" :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="关键字" size="small">
              <el-input v-model="formInline.user" placeholder="根据文章标题搜索"></el-input>
            </el-form-item>
            <el-form-item label="状态" size="small">
              <el-select v-model="formInline.region" placeholder="请选择">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item size="small">
              <el-button @click="onClose">清除</el-button>
              <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <el-button type="success" @click="onAdd">新增技巧</el-button>
        </el-col>
      </el-row>
      <el-alert
        title="消息提示的文案"
        type="info"
        show-icon
        :closable="false"
      >
      </el-alert>
      <!-- 表单 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号">
        </el-table-column>
        <el-table-column prop="title" label="文章标题" width="180">
          <!-- <template slot-scope="scope"> -->
          <!-- <template v-slot="{row}"> -->
          <!-- {{ row.title }} -->
          <!-- <i v-if="row.videoURL" icon="el-icon-video-camera-solid" @click="watchVideo(row)"></i> -->
          <!-- </template> -->
          <template slot-scope="scope">
            <span>{{ scope.row.title }}</span>
            <i v-if="scope.row.videoURL" class="el-icon-video-camera-solid" @click="watchVideo(scope.row)"></i>
          </template>
        </el-table-column>
        <el-table-column prop="visits" label="阅读数">
        </el-table-column>
        <el-table-column prop="username" label="录入人">
        </el-table-column>
        <el-table-column prop="createTime" label="录入时间">
          <template slot-scope="scope">{{ scope.row.createTime | parseTimeByString("{y}-{m}-{d}") }}</template>
        </el-table-column>
        <el-table-column label="状态" sortable="">
          <template v-slot="{row}">
            <span v-if="row.state==1">已启用</span>
            <span v-else>已禁用</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" sortable="" fixed="right" width="200">
          <template v-slot="{row}">
            <el-button type="text" @click="ViewPage(row)">预览</el-button>
            <el-button type="text" size="small">
              <span v-if="row.state==1" @click="changeState(row)">禁用</span>
              <span v-else @click="changeState(row)">启用</span>
            </el-button>
            <el-button type="text" size="small" :disabled="row.state===1?true:false" @click="onEdit(row)">修改</el-button>
            <el-button type="text" size="small" :disabled="row.state===1?true:false" @click="onDelete(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        background
        layout=" prev, pager, next,sizes, jumper"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="page.pagesize"
        :total="page.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
    </el-card>
    <!-- 新增 -->
    <articles-add ref="article" :show-add.sync="showAdd"></articles-add>
    <!-- 详情 -->
    <articles-preview :data="article" :show-list.sync="showList"></articles-preview>
    <!-- 视频 -->
    <el-dialog
      :visible.sync="show"
      width="50%"
      :before-close="close"
    >
      <!-- 关闭按钮 -->
      <el-button icon="el-icon-video-camera-solid" @click="close()"></el-button>
      <!-- 视频播放 -->
      <video ref="video" :src="src" class="video" controls=""></video>
    </el-dialog>
  </div>
</template>

<script>
import { list, detail, remove, changeState } from '@/api/hmmm/articles.js'
import ArticlesAdd from '../components/articles-add.vue'
import ArticlesPreview from '../components/articles-preview.vue'
export default {
  name: '',
  components: { ArticlesAdd, ArticlesPreview },
  data() {
    return {
      // 筛选条件表单
      formInline: {
        user: '',
        region: undefined
      },
      // 列表数据
      tableData: [],
      // 页面设置
      page: {
        page: 1, // 页码
        pagesize: 10, // 页尺寸
        keyword: undefined, // 关键
        state: undefined, // 状态
        total: 0
      },
      showAdd: false,
      showList: false,
      // 预览的数据
      article: {
        title: '', // 文章标题
        createTime: '', // 录入时间
        creator: '', // 录入人
        reads: '', // 浏览次数
        articleBody: '', // 文章内容
        id: undefined, // id
        state: '' // 状态
      },
      show: false, // 默认不显示
      src: ''
    }
  },
  created() {
    this.getList()
  },
  mounted() {},
  methods: {
    onClose() {
      // 清空数据
      this.formInline = {
        user: undefined,
        region: undefined
      }
      this.$refs['formRef'].resetFields()
    },
    // 筛选数据
    onSubmit() {
      // 获取数据，根据数据进行查询
      this.page.keyword = this.formInline.user
      this.page.state = this.formInline.region
      this.getList() // this.formInline.region = 1
    },
    // 获取列表
    async getList() {
      const res = await list(this.page)
      console.log(this.page.page, res)
      this.tableData = res.data.items // 渲染列表
      this.page.total = res.data.counts // 总数
    },
    // 页面尺寸
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`)
      this.page.pagesize = val
    },
    // 页面跳转
    handleCurrentChange(val) {
      this.page.page = val // 页码
      this.getList()
    },
    // 播放视频
    watchVideo(row) {
      this.show = true
      this.src = row.videoURL
    },
    // 关闭视频
    close() {
      this.show = false
    },
    // 文章详情,查询数据并把数据放入article，打开详情页
    async ViewPage(row) {
      const res = await detail(row)
      console.log(res)
      this.article.title = res.data.title // 文章标题
      this.article.createTime = res.data.createTime // 录入时间
      this.article.creator = res.config.params.username // 录入人
      this.article.reads = res.data.visits // 浏览次数
      this.article.articleBody = res.data.articleBody // 文章内容
      this.article.id = res.data.id // 文章内容
      this.article.state = res.data.state // 文章内容
      console.log(this.article)
      this.showList = true
    },
    // 改变状态
    async changeState(row) {
      row.state = row.state === 1 ? 0 : 1
      await changeState(row)
      console.log(row.state)
    },
    // 添加
    onAdd() {
      this.showAdd = true
    },
    // 编辑
    async onEdit(row) {
      // 当前部门的详细数据
      const res = await detail(row)
      console.log(res)
      // this.article.title = res.data.title // 文章标题
      // this.article.createTime = res.data.createTime // 录入时间
      // this.article.creator = res.config.params.username // 录入人
      // this.article.reads = res.data.visits // 浏览次数
      // this.article.articleBody = res.data.articleBody // 文章内容
      // this.article.id = res.data.id // 文章内容
      // this.article.state = res.data.state // 文章内容
      // console.log(this.article)
      this.$refs.article.form = res.data
      console.log(this.$refs.article.form)
      this.showAdd = true
    },
    // 文章删除
    onDelete(data) {
      this.$confirm('此操作将永久删除该文章，是否继续', '提示', {
        confirmButtonText: '是',
        cancelButtonText: '否',
        type: 'warning'
      }).then(async action => {
        // console.log(data)
        await remove(data)
        this.$message({
          message: '删除成功',
          type: 'success',
          showClose: true,
          duration: 3000
        })
        this.getList()
      }).catch(() => {

      })
    }
  }
}
// .container{padding: 10px;}
</script>

<style scoped lang='scss'>
.container{
  padding: 10px;
}
</style>
